<template>
  <div id="Home-component">
    <van-nav-bar title="购物商城" fixed />
    <!-- 轮播图 -->
    <Swipe :banner="banner_data"></Swipe>
    <!-- 推荐 -->
    <Recommend :commend="commend_data"></Recommend>
    <!-- 流行 -->
    <Popular></Popular>
    <!-- 分类 -->
    <TabControl @classify_data="get_classify"></TabControl>
    <!-- 商品表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <Goods :goods="classify_data[type]"></Goods>
    </van-list>
  </div>
</template>

<script>
//轮播图
import Swipe from "@/components/swipe/Swipe.vue"
//数据请求
import required from "@/netword/index.js"
//推荐组件
import Recommend from "@/views/home/content/Recommend.vue"
//流行组件
import Popular from "@/views/home/content/Popular.vue"
//分类
import TabControl from "@/views/home/content/TabControl.vue"

import Goods from "@/components/goods/Goods.vue"

export default {
  name: "Home",
  data() {
    return {
      //存放轮播图数据
      banner_data: [],
      //推荐数据
      commend_data: [],
      //点击类别数据
      classify_data: {
        sell: { page: 1, list: [] },
        new: { page: 1, list: [] },
        pop: { page: 1, list: [] },
      },
      //当前选中的
      type: "",
      //aaa
      loading: true,
      finished: false,
    }
  },
  components: {
    Swipe,
    Recommend,
    Popular,
    TabControl,
    Goods,
  },
  created() {
    this.get_swipe()
  },
  methods: {
    //请求数据
    async get_swipe() {
      const {
        data: { data: res },
      } = await required("/home/multidata")

      //轮播图
      this.banner_data = res.banner

      //推荐
      this.commend_data = res.recommend
      console.log("全部数据：", res)
      console.log("all", this.all_data)
    },

    //接受点击类别的数据
    get_classify(val) {
      //赋值当前选中的
      this.type = val
      const page = this.classify_data[val].page
      this.$http
        .get("/home/data?type=" + val + "&page=" + page)
        .then((resul) => {
          const list = resul.data.data.list
          console.log(resul.data.data.list)
          this.classify_data[val].list = [
            ...this.classify_data[val].list,
            ...list,
          ]
          //请求完成后把loading设置为false
          this.loading = false
          //判断请求回来的有没有数据
          if (list.length == 0) {
            //上拉显示已经到底了
            this.finished = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
      // const { data: res } = await required("/home/data")
    },
    //上拉时触发
    onLoad() {
      //页数+1
      this.classify_data[this.type].page += 1
      //重新请求数据
      this.get_classify(this.type)
    },
  },
}
</script>

<style></style>
